<template>
  <div class="box">
     <p>个人中心</p>
     <img src="../IMG/狗头.jpg" 
     style="width: 50px; height: 50px; border-radius: 50%; position: relative;top: 20px; left: 10px;">
     <div class="denglu">
      登陆
     </div>

     <div class="box2">
      <div class="boxx2">
        <ul>
          <li v-for="(v,i) in box2list" :key="v.path">
            <router-link :to="v.path">
              <img :src="v.img" style="width: 40px; height: 40px;" alt="">
              <a>{{ v.title }}</a>
            </router-link>
          </li>
        </ul>
      </div>
     </div>


     <div class="box3">
      <div class="boxx3">
        <ul>
          <li v-for="(v,i) in box3list" :key="v.path">
            <router-link :to="v.path">
              <a>{{ v.img }}</a>
              <a style="text-decoration: none;">{{ v.title }}</a>
            </router-link>
          </li>
        </ul>
      </div>
     </div>


  </div>
</template>

<script>
export default {
data(){
  return{
    box2list:[
      {title:'同城订单',img:require('../IMG/同城订单.png'),path:'/pageone'},
      {title:'商品订单',img:require('../IMG/同城订单.png'),path:'/pageone'},
      {title:'服务/卡订单',img:require('../IMG/同城订单.png'),path:'/pageone'},
      {title:'全部订单',img:require('../IMG/同城订单.png'),path:'/pageone'},
    ],
    box3list:[
      {title:'同城订单',img:0,path:'/pageone'},
      {title:'商品订单',img:0,path:'/pageone'},
      {title:'服务/卡订单',img:0,path:'/pageone'},
      {title:'全部订单',img:0,path:'/pageone'},
    ]
  }
}
}
</script>

<style lang="less" scoped>
*{
  padding: 0;
  margin: 0;
}
.box{
  background-image: url(../IMG/背景.png);
  width: 100%;
  height:calc(100vh - 96px);
  background-color: rgb(110, 105, 105);


  p{
    position: relative;
    top: 10px;
    
    // margin-top: 20px;
    font-size: 30px;
    text-align: center;
    // text-decoration: none;

}
}
.box2{
  position: fixed;
  // max-width: 720px;
  width: 100%;
  margin-top: 10px;
  // margin: 0 auto;
  // margin-left: 2%;
  // padding-left: 1%;
  // padding-right: 1%;
  height: 6rem;
  background-color: rgb(255, 255, 255);
  border-radius: 20px 20px 20px 20px;
  .boxx2{
    height: 6rem;
  }
  .boxx2 ul{
    width: 100%;
    padding-left: 0;
    display: flex;
    text-align: center;
    align-items: center;
    height: 100%;
  }
  .boxx2 ul li{
    flex: 1;
    list-style-type: none;
    text-decoration: none;
  }
  .boxx2 ul li a {
    display: block;
    color: black;
    text-decoration: none;
    
  }
}





.box3{
  position: fixed;
  // max-width: 720px;
  width: 100%;
  margin-top: 120px;
  // margin: 0 auto;
  // margin-left: 2%;
  // padding-left: 1%;
  // padding-right: 1%;
  height: 6rem;
  background-color: rgb(255, 255, 255);
  border-radius: 20px 20px 20px 20px;
  text-decoration: none;

  .boxx3{
    height: 6rem;
    text-decoration: none;

  }
  .boxx3 ul{
    width: 100%;
    padding-left: 0;
    display: flex;
    text-align: center;
    align-items: center;
    height: 100%;
    text-decoration: none;

  }
  .boxx3 ul li{
    flex: 1;
    list-style-type: none;
    text-decoration: none;
  }
  .boxx3 ul li a{
      display: block;
    color: black;
    padding-top: 10px;
    text-decoration:none
  }
}


</style>